<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>在线音乐</title>
        <!-- load stylesheets -->
       <!--  <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:300,300italic,400">  <!-- Google web font "Open Sans" -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/styles.css" rel="stylesheet" />
        <link href="css/bootstrap-table.css" rel="stylesheet">
        <style>
            #bg {
                padding-top: 50px;
            }
            #bg2 {
                padding-top: 50px;
            }
            #bg3 {
                padding-top: 20px;
            }
            #bg4{
                margin-left:10px;
                margin-right: 10px
            }
        </style>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><span>Web</span>Listen</a>
                <ul class="user-menu btn-lg">
                    <li class="dropdown pull-right">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span> <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="player.html"><span class="glyphicon glyphicon-headphones"></span>本地音乐</a></li>
                            <li><a href="search.html"><span class="glyphicon glyphicon-cloud"></span> 在线音乐</a></li>
                            <li><a href="add.html"><span class="glyphicon glyphicon-log-out"></span> 分享</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
                            
        </div><!-- /.container-fluid -->
    </nav>    
     <div class="row" >
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- <div class="panel-heading">
                      <div ><h2>在线音乐</h2></div>
                    </div> -->
            <!-- background images -->
            <div class="form-group">
            <div class="row" id="bg2">
                <div class="col-md-5 col-sm-4 col-xs-4"> </div>
                    <div class="col-md-2  col-sm-4 col-xs-4" align="center">  
                            <img src="images/slider/thumb.jpg" class="img-circle" alt="Cinque Terre" />
                     </div>
                 <div class="col-md-5 col-sm-4 col-xs-4">  </div>
            </div>
             <div class="row" id="bg3">
                <div class="col-md-4 col-sm-1 col-xs-1"> </div>
                <div class="col-md-4 col-sm-10 input-group col-xs-10" align="center">  
                        <input class="form-control" placeholder="关键字" name="password" value="" id="search_input">
                        <span class="input-group-btn" > 
                            <button onClick='serach_onclick()' class="btn btn-play" type="button">
                                在线搜索
                            </button>
                        </span> 
                </div>
                <div class="col-md-4 col-sm-1 col-xs-1">  </div>
             </div>
             <div class="row" id="bg"></div>
                <div class="row" id="bg4">
                        <div class="col-sm-6 col-md-3" >
                            <div class="thumbnail" id="div0">
                                <img src="images/slider/slide2.jpg"
                                     alt="通用的占位符缩略图" id="img0">
                                <div class="caption">
                                    <h3 id="name0">经典英文MHZ</h3>
                                    <p id="player0">总有一首歌曲，一听，便为之着迷。。</p>
                                    <p>
                                        <button type="button" class="btn btn-primary" role="button" id="btn0" onClick='play(0)'>
                                            <span class="glyphicon glyphicon-play"></span> 
                                        </button>
                                        <button type="button" href="#" class="btn btn-default" role="button" onClick="stop()">
                                            <span class="glyphicon glyphicon-stop"></span> 
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3" >
                            <div class="thumbnail" id="div1">
                                <img src="images/slider/slide3.jpg"
                                     alt="通用的占位符缩略图" id="img1">
                                <div class="caption">
                                    <h3 id="name1">咖啡MHZ</h3>
                                    <p id="player1">我不在喝咖啡，就在听咖啡兆赫。</p>
                                    <p>
                                        <button type="button" class="btn btn-primary" role="button" id="btn1" onClick='play(1)'>
                                            <span class="glyphicon glyphicon-play"></span> 
                                        </button>
                                        <button type="button" class="btn btn-default" role="button" onClick="stop()">
                                            <span class="glyphicon glyphicon-stop"></span> 
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3" >
                            <div class="thumbnail" id="div2">
                                <img src="images/slider/slide5.jpg"
                                     alt="通用的占位符缩略图" id="img2">
                                <div class="caption">
                                    <h3 id="name2">老歌精选MHZ</h3>
                                    <p id="player2">随时间远去，却永远回荡在心里。</p>
                                    <p>
                                        <button type="button" class="btn btn-primary" role="button" id="btn2" onClick='play(2)'>
                                            <span class="glyphicon glyphicon-play"></span> 
                                        </button>
                                        <button type="button" class="btn btn-default" role="button"  onClick="stop()">
                                            <span class="glyphicon glyphicon-stop"></span> 
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3" >
                            <div class="thumbnail" id="div3">
                                <img src="images/slider/slide4.jpg"
                                     alt="通用的占位符缩略图" id="img3">
                                <div class="caption">
                                    <h3 id="name3">轻音乐MHZ</h3>
                                    <p id="player3">在属于你的音乐地带，释放心灵。</p>
                                    <p>
                                        <button type="button" class="btn btn-primary" role="button" id="btn3" onClick='play(3)'>
                                            <span class="glyphicon glyphicon-play"></span> 
                                        </button>
                                        <button type="button" class="btn btn-default" role="button" onClick="stop()">
                                            <span class="glyphicon glyphicon-stop"></span> 
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>   
                </div>
            </div>  <!-- .container-fluid -->  
          </div>
        </div>
      </div>  
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script>
    var list=new Array(4);
    var isSearch = 0;

    $(window).load(function () {

    });

    function loadFM(FM_count){
    }

    function play(count){
        if(isSearch==0){
             $.post("cgi-bin/search.cgi",{fm: count }, function (data) {
             alert(data);
             });
        }        
        else{
             var s = list[count];
             $.post("cgi-bin/search.cgi",{url: s }, function (data) {
             //alert(data);
            }); 
        }
        
    }

    function stop(){
        $.post("cgi-bin/search.cgi",{com: 0 }, function (data) {
            alert(data);
        });
    }

    function escape2Html(s) {
     return (typeof s != "string") ? s :
          s.replace(this.REGX_HTML_ENCODE,
                    function($0){
                        var c = $0.charCodeAt(0), r = ["&#"];
                        c = (c == 0x20) ? 0xA0 : c;
                        r.push(c); r.push(";");
                        return r.join("");
                    });
    }

    function serach_onclick() {
        if($('#search_input').val()!=null){
            var url = "http://s.music.163.com/search/get/?s="+$('#search_input').val()+"&type=1";
            $.get(url,{},function (data){
             var obj = data;
             var i=0;
             for(i=0;i<4;i++)
              {
                if( i<obj.result.songCount ){
                   document.getElementById("name"+i).innerHTML=obj.result.songs[i].name;  
                   document.getElementById("player"+i).innerHTML=obj.result.songs[i].artists[0].name; 
                   document.getElementById("img"+i).src=obj.result.songs[i].album.picUrl; 
                   document.getElementById("div"+i).style.display="block";
                    list[i] = obj.result.songs[i].audio;
                    isSearch = 1;
                }else{
                   document.getElementById("div"+i).style.display="none";
                   document.getElementById("btn"+i).onClick=function(){
                   };
                }
              }
            },"jsonp");
        }else{
            alert("请输入关键字!");
        }
    };
  </script>
    </body>
</html>